<template>
  <nav class="bg-white shadow-lg fixed w-full top-0 z-50">
    <div class="container">
      <div class="flex justify-between items-center">
        <!-- Logo -->
        <router-link to="/home" class="flex items-center space-x-2">
          <div
            class="w-16 h-16 rounded-lg flex items-center justify-center"
          >
             <img class="w-16 h-16" src="../assets/logo.jpg" alt="" srcset="" />
          </div>
          <div v-if="siteConfig">
            <div class="text-xl font-bold text-gray-900">
              {{ siteConfig.logo.text }}
            </div>
            <div class="text-xs text-gray-500">
              {{ siteConfig.logo.subtext }}
            </div>
          </div>
        </router-link>

        <!-- Desktop Navigation -->
        <div class="hidden md:flex items-center space-x-8">
          <router-link
            v-for="item in navigationConfig"
            :key="item.key"
            :to="item.path"
            class="hover:text-[#ff6839] font-medium transition-colors duration-200"
            :class="{ 'text-[#ff6839]': $route.path === item.path, 'text-gray-600': $route.path !== item.path }"
          >
            {{ item.name }}
          </router-link>

          <!-- Language Switcher -->
          <div class="relative">
            <button
              @click="toggleLanguageMenu"
              class="flex items-center space-x-1 text-gray-600 hover:text-[#ff6839] font-medium transition-colors duration-200"
            >
              <svg
                class="w-4 h-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"
                ></path>
              </svg>
              <span>{{ commonConfig?.language || "中文繁体" }}</span>
              <el-icon><ArrowDownBold /></el-icon>
            </button>

            <div
              v-show="showLanguageMenu"
              class="absolute right-0 mt-2 w-32 bg-white rounded-md shadow-lg py-1 z-10"
            >
              <button
                @click="changeLanguage('tl')"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
                :class="{
                  'text-blue-600 bg-blue-50': currentLanguage === 'tl',
                }"
              >
                {{ commonConfig?.traditional || "中文繁体" }}
              </button>
              <button
                @click="changeLanguage('zh')"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
                :class="{
                  'bg-blue-50 text-blue-600': currentLanguage === 'zh',
                }"
              >
                {{ commonConfig?.chinese || "中文简体" }}
              </button>
              <button
                @click="changeLanguage('en')"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
                :class="{
                  'bg-blue-50 text-blue-600': currentLanguage === 'en',
                }"
              >
                {{ commonConfig?.english || "English" }}
              </button>
            </div>
          </div>
        </div>

        <!-- Mobile menu button -->
        <button
          @click="toggleMobileMenu"
          class="md:hidden flex items-center px-3 py-2 border rounded text-gray-600 border-gray-200 hover:text-[#ff6839] hover:border-blue-600"
        >
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20">
            <title>Menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
          </svg>
        </button>
      </div>

      <!-- Mobile Navigation -->
      <div
        v-show="showMobileMenu"
        class="md:hidden bg-white border-t border-gray-200"
      >
        <div class="px-2 pt-2 pb-3 space-y-1">
          <router-link
            v-for="item in navigationConfig"
            :key="item.key"
            :to="item.path"
            @click="closeMobileMenu"
            class="block px-3 py-2 text-gray-600 hover:text-[#ff6839] font-medium transition-colors duration-200"
            :class="{ 'text-[#ff6839] bg-blue-50': $route.path === item.path }"
          >
            {{ item.name }}
          </router-link>

          <!-- Mobile Language Switcher -->
          <div class="border-t border-gray-200 pt-2 mt-2">
            <div class="px-3 py-2 text-sm text-gray-500">
              {{ commonConfig?.language || "中文繁体" }}
            </div>
            <button
              @click="changeLanguage('tl')"
              class="block w-full text-left px-3 py-2 text-gray-600 hover:text-[#ff6839] font-medium transition-colors duration-200"
              :class="{ 'text-[#ff6839] bg-blue-50': currentLanguage === 'tl' }"
            >
              {{ commonConfig?.traditional || "中文繁体" }}
            </button>
            <button
              @click="changeLanguage('zh')"
              class="block w-full text-left px-3 py-2 text-gray-600 hover:text-[#ff6839] font-medium transition-colors duration-200"
              :class="{ 'text-[#ff6839] bg-blue-50': currentLanguage === 'zh' }"
            >
              {{ commonConfig?.chinese || "中文简体" }}
            </button>
            <button
              @click="changeLanguage('en')"
              class="block w-full text-left px-3 py-2 text-gray-600 hover:text-[#ff6839] font-medium transition-colors duration-200"
              :class="{ 'text-[#ff6839] bg-blue-50': currentLanguage === 'en' }"
            >
              {{ commonConfig?.english || "English" }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useConfig } from "@/composables/useConfig";
import { switchLanguage } from "@/i18n";
import { ArrowDownBold } from '@element-plus/icons-vue'

const { getSiteConfig, getNavigationConfig, getCommonConfig, loadConfig } =
  useConfig();
const { locale } = useI18n();

const showMobileMenu = ref(false);
const showLanguageMenu = ref(false);

const siteConfig = computed(() => getSiteConfig());
const navigationConfig = computed(() => getNavigationConfig());
const commonConfig = computed(() => getCommonConfig());
const currentLanguage = computed(() => locale.value);

const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value;
};

const closeMobileMenu = () => {
  showMobileMenu.value = false;
};

const toggleLanguageMenu = () => {
  showLanguageMenu.value = !showLanguageMenu.value;
};

const changeLanguage = (lang: string) => {
  switchLanguage(lang);
  showLanguageMenu.value = false;
  showMobileMenu.value = false;
};

onMounted(() => {
  loadConfig();
});
</script>

<style scoped>
/* 自定义样式 */
</style>
